<template>
	<div class="notice_con aui-content aui-margin-b-15" style="margin: 0rem !important;">
		<div class="noticeli">
			<span class="noticelispan">馋嘴头条</span>
			<!--<div class="noticeliicon">
				<i class="icon njfont nj-gonggao"></i>
			</div>-->
			<div class="aui-list-item-inner screenHeight" :style="`width: ${screenwidth}px`">
				<div class="noticeSwiper">
					<div class="wrapper" :style="{height:originalData.img_height+'px'}"><!--width:originalData.img_width+'px',-->
						<div class="wrapper-content2" :class="{wrapper_trans2:isTrans}" :style="{height:originalData.img_height*(num+2)+'px',top:-originalData.img_height+'px'}" ref="wrapperContent2">
							<div class="wrapper-content_div" v-if="noticeSwiperSlides" @click="goToDetail(noticeSwiperSlides[noticeSwiperSlides.length-1])" :alt="noticeSwiperSlides.length-1" 
								:style="{height:originalData.img_height+'px'}">
								<span>{{noticeSwiperSlides.length>0?noticeSwiperSlides[noticeSwiperSlides.length-1].title:''}}</span>
								<img v-if="noticeSwiperSlides[noticeSwiperSlides.length-1]&&noticeSwiperSlides[noticeSwiperSlides.length-1].imgUrl" :src="noticeSwiperSlides[noticeSwiperSlides.length-1].imgUrl">
							</div>
							<div class="wrapper-content_div" v-if="noticeSwiperSlides" v-for="(item,index) in noticeSwiperSlides" :key="index" @click="goToDetail(item)" :alt="index" :style="{height:originalData.img_height+'px'}">
								<span>{{noticeSwiperSlides.length>0?item.title:''}}</span>
								<img v-if="item.imgUrl" :src="item.imgUrl">
							</div>
							<div class="wrapper-content_div" v-if="noticeSwiperSlides" @click="goToDetail(noticeSwiperSlides[0])" alt="0" :style="{height:originalData.img_height+'px'}">
								<span>{{noticeSwiperSlides.length>0?noticeSwiperSlides[0].title:''}}</span>
								<img v-if="noticeSwiperSlides[0]&&noticeSwiperSlides[0].imgUrl" :src="noticeSwiperSlides[0].imgUrl">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			noticeSwiperSlides: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				originalData: {
					img_width: 500,
					img_height: 49,
					/*btn_width: 40,
					btn_height: 40,*/
					num: this.noticeSwiperSlides.length,
					delay: 500,
				},
				isTrans: true, //因为到最后一张图片，index为1时，需要立即跳到第二张index也为1的图片，这个用来是否给出transition
				index: 1,
				timer: null, //setInterval
				clickdelay: false //用来防止连续点击
			}
		},
		computed: {
			num() {
				return this.noticeSwiperSlides.length;
			},
			noticeSwiperS() {
				console.log(this.noticeSwiperSlides, 'ss')
				return this.noticeSwiperSlides;
			},
			screenwidth() {
				return window.innerWidth - '107';
			}
		},
		methods: {
			//轮播动画
			next() {
				if(this.clickdelay) {
					return
				}
				this.clickdelay = true
				if(this.index == this.num) {
					this.index = 1
				} else {

					this.index += 1
				}
				this.animate(this.originalData.img_height)

			},
			prev() {
				if(this.clickdelay) {
					return
				}
				this.clickdelay = true
				if(this.index == 1) {
					this.index = this.num
				} else {
					this.index -= 1
				}
				this.animate(-this.originalData.img_height)
			},
			animate(offset) {
				var node = this.$refs.wrapperContent2
				var self = this;
				if(node) {
					var top = parseInt(node.style.top) - offset
					this.isTrans = true
					node.style.top = top + 'px'
					setTimeout(function() {
						if(top < -(self.num * self.originalData.img_height)) {
							self.isTrans = false
							node.style.top = -self.originalData.img_height + 'px'
							self.clickdelay = false //当到达最后一张图片时 
						}
						if(top > -45) {
							self.isTrans = false
							node.style.top = -self.num * self.originalData.img_height + 'px'
							self.clickdelay = false //当到达第一张图片时  
						}
					}, this.originalData.delay)
				}

			},
			play() {
				var node = this.$refs.wrapperContent2
				var self = this;
				this.timer = setInterval(function() {
					self.next()
				}, 3000)
			},
			stop() {
				this.clickdelay = false //用来防止连续点击
				clearInterval(this.timer)
				this.timer = null
			},
			turnTo(flag) {
				if(flag == this.index) {
					return
				} else {
					var offset = (flag - this.index) * this.originalData.img_height
					this.index = flag
					this.animate(offset)
				}

			},
			showNotice(item) {
				let dialog = new auiDialog()
				//				console.log('公告')
				dialog.alert({
					title: "通知公告",
					msg: item,
					buttons: ['我知道了']
				}, function(ret) {
					//					console.log(ret)
				})
			},
			goToDetail(item) {
				//				console.log(item,'传')
				//this.$router.push{path:'noticeDetail',query:{id:item.rid}}
				this.$router.push({
					path: 'noticeDetail',
					query: {
						rid: item.rid
					}
				});
			}
		},
		created() {
			// this.pageTree = getPageTree(this, "index");
			// console.log(this.pageTree);
		},
		mounted() {
			/*下面是判断过渡动画是否完成*/
			var node = this.$refs.wrapperContent2
			var transitions = {
				'transition': 'transitionend',
				'OTransition': 'oTransitionEnd',
				'MozTransition': 'transitionend',
				'WebkitTransition': 'webkitTransitionEnd'
			}
			var self = this

			for(var t in transitions) {

				if(node.style[t] !== undefined) {
					var transitionEvent = transitions[t];
				}
			}
			transitionEvent && node.addEventListener(transitionEvent, function() {
				self.clickdelay = false
			});
			/*this.play()*/
		},
		watch: {
			noticeSwiperSlides() {
				this.stop();
				this.play();
			}
		}
	}
</script>

<style>
	.noticeli {
		overflow: hidden;
		position: relative;
		font-size: 0.7rem;
		background-color: #ffffff;
		display: -webkit-box;
		height: 2.45rem;
		line-height: 2.45rem;
	}
	
	.noticelispan {
		display: inline-block;
		width: 90px;
		text-align: left;
		height: 1rem;
		line-height: 1rem;
		padding-left: 10px;
		color: #438A3E;
		border-left: 2px solid #438A3E;
		/*margin-right: 0.5rem;*/
		font-weight: bolder;
	}
	
	.noticeliicon {
		height: 2.45rem;
		line-height: 2.7rem;
		margin-right: 0.3rem;
	}
	.wrapper{
		width: 100%;
	}
	.wrapper-content2 {
		position: absolute;
		top: 0;
		/*z-index: 1;*/
		width: 100%;
	}
	
	.wrapper-content_div {
		border: none;
		outline: none;
		position: relative;
		/*float: left;*/
		text-align: left;
		/*padding-left: 10px;*/
		/*padding-right: 15px;*/
		line-height: 49px;
		overflow-x: hidden;
		width: 100%;
	}
	.wrapper-content_div span {
		display: inline-block;
		width: 10.5rem;
		/*height: 2rem;*/
		overflow:hidden;
		white-space: nowrap;
		text-overflow : ellipsis ;
	}
	.wrapper-content_div img {
		position: absolute;
		/*left: 11rem;*/
		right: 0rem;
		top: 0.5rem;
		/*margin-top: 0.4rem;*/
		display: inline-block;
		width: 1.5rem;
		height: 1.5rem;
	}
	
	.wrapper_trans2 {
		transition: top .3s ease
	}
	
	.noticeSwiper {
		width: 100%;
		height: 100%;
	}
	
	.noticeWaper {
		height: 2.5rem!important;
	}
	.screenHeight{
		height: 2.25rem;
		position: relative;
	}
</style>